<template>
    <div class="header">
        <!-- 折叠按钮 -->
        <el-row>
            <el-col :span="12">
                <div class="collapse-btn" @click="collapseChage">
                    <i v-if="!collapse" class="bg-icon el-icon-s-fold"></i>
                    <i v-else class="bg-icon el-icon-s-unfold"></i>
                </div>
            </el-col>
            <el-col :span="12">
                <!-- <div class="user-photo">
                    <img class="user-logo" src="../../../static/img/img.jpg" />
                </div> -->
                <el-dropdown class="user-info" trigger="click" @command="handleCommand">
                    <div class="user-name">欢迎：{{ username }}&ensp; <img class="user-logo" src="../../../static/img/img.jpg" /></div>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="userCenter">个人中心</el-dropdown-item>
                        <el-dropdown-item command="loginout">退出</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </el-col>
        </el-row>
    </div>
</template>
<script>
    import eventBus from "../../utils/eventBus";
    export default {
        data() {
            return {
                collapse: false,
                name: "",
            };
        },
        computed: {
            username() {
                let username = sessionStorage.getItem("ms_username");
                return username ? username : this.name;
            },
        },
        methods: {
            handleCommand(command) {
                if (command == "loginout") {
                    sessionStorage.removeItem("ms_username");
                    sessionStorage.removeItem("ms_userId");
                    this.$router.push("/login");
                } else if (command == "userCenter") {
                    this.$router.push("/userCenter");
                }
            },
            collapseChage() {
                this.collapse = !this.collapse;
                eventBus.$emit("collapse", this.collapse);
            },
        },
    };
</script>
<style>
    .collapse-btn {
        font-size: 26px;
        height: 60px;
        line-height: 60px;
        width: 60px;
        text-align: center;
        /*caret-color: rgba(0, 0, 0, 0);取消鼠标悬停光标  */
        caret-color: rgba(0, 0, 0, 0);
    }

    .user-name{
        display: inline-block;
        height: 60px;
        line-height: 60px;
        width: auto;
        caret-color: rgba(0, 0, 0, 0);
    }
    .user-logo {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        vertical-align: middle;
    }

    .user-info {
        float: right;
        padding-right: 35px;
    }
</style>